import React, { Component } from 'react'
import { NavBar, Icon, Tabs } from "antd-mobile";
import "./Collect.scss"
import Nothing from "../../assets/images/nothing.png"
export default class Collect extends Component {
  
  handleToSearch = (params) => {
    this.props.history.push("/searchCenter/")
  }
  state = {
    scList: "",
    tabs: [
      { title: "默认" }, { title: "促销" }, { title: "降价" }, { title: "分享" }, { title: "库存" }
    ],
    goodsInfo:{}
  }
  // 跳转到首页
  handleToIndex = (params) => {
    this.props.history.push("/")
  }
 

  componentDidMount() {
    let scList = JSON.parse(localStorage.getItem("scList"))
    this.setState({
      scList: scList,
    })
  }
  render() {
    return (
      <div className="collect">
        {/* 我的导航条开始 */}
        <div className="dang-my-nav">
          <NavBar
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={() => window.history.go(-1)}
            rightContent={[
              <Icon key="0" type="search" style={{ marginRight: '16px' }} onClick={this.handleToSearch} />,
            ]}
          >我的收藏</NavBar>
        </div>

        {/* 商品订单列表导航开始 */}
        <div className="Collect-tab">
          <Tabs tabs={this.state.tabs}
            initialPage={0}
            tabBarUnderlineStyle={{ border: "0.013333rem solid red" }}
            tabBarInactiveTextColor={{ color: "#000" }}>
            <div className="approve">
              {this.state.scList ?
                (<div className="Collect-show">
                  <div className="collect-list">
                    {this.state.scList.map((val) => {
                      return (
                        <div className="list-item" key={val.name}>
                          <div className="item-let">
                            <img src={val.image_url} alt="" />
                          </div>
                          <div className="item-right">
                            <div className="item-right-title">
                              {val.name}
                            </div>
                            <div className="item-right-price">{val.price}</div>
                            <div className="solider">
                              {val.product_tags.map((v) => {
                                return <span key={v.name}>{v.name}</span>;
                              })}
                            </div>
                            <div className="item-bottom">
                              <span>找相似</span>
                              <span>降价通知</span>
                              <i className="iconfont icon-gouwuche3"></i>
                            </div>
                          </div>
                        </div>
                      )
                    })}
                  </div>
                </div>)
                :
                (<div className="collect-empty">
                  <div className="collect-empty-item">
                    <img src={Nothing} alt="" />
                    <span>你还没有收藏的宝贝哦</span>
                    <h3 onClick={this.handleToIndex}>马上去首页逛逛</h3>
                  </div>
                </div>)

              }
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
              Content of second tab
        </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
              Content of third tab
        </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
              Content of second tab
        </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
              Content of third tab
        </div>
          </Tabs>
        </div>

      </div>
    )
  }
}
